import React from 'react';
import {Card,Button,Radio} from 'antd'
import {PlusOutlined,EditOutlined,DeleteOutlined,SearchOutlined,DownloadOutlined,LeftOutlined,RightOutlined} from '@ant-design/icons'
import './ui.less'
class Buttons extends React.Component{
    state={
        loading:true,
        size:"default"
    }
    handelClose = ()=>{
        this.setState({
            loading:false
        })
    }
    handelChange = (e)=>{
        this.setState({
            size:e.target.value
        })
    }
    render(){
        const {loading,size} = this.state
        return(
        <div style={{width:'100%'}}>
            <Card title="基础按钮" className="card-wrap">
                <Button type="primary">单车</Button>
                <Button>单车</Button>
                <Button type="danger">单车</Button>
                <Button type="dashed">单车</Button>
                <Button disabled>单车</Button>
            </Card>
            <Card title="图形按钮" className="card-wrap">
                <Button icon={<PlusOutlined />}>创建</Button>
                <Button icon={<EditOutlined />}>编辑</Button>
                <Button icon={<DeleteOutlined />}>删除</Button>
                <Button icon={<SearchOutlined />}>搜索</Button>
                <Button icon={<DownloadOutlined />}>下载</Button>
            </Card>
            <Card title="loading" className="card-wrap">
                <Button type="primary" loading={loading}>单车</Button>
                <Button type="primary" shape="circle" loading={loading}></Button>
                <Button type="primary" onClick={this.handelClose}>关闭</Button>
            </Card>
            <Card title="按钮组" className="card-wrap">
                <Button.Group>
                    <Button type="primary" icon={<LeftOutlined />}>返回</Button>
                    <Button type="primary">前进<RightOutlined /></Button>
                </Button.Group>
            </Card>
            <Card title="按钮尺寸" className="card-wrap">
                <Radio.Group onChange={this.handelChange}>
                    <Radio value="small">小</Radio>
                    <Radio value="dafault">中</Radio>
                    <Radio value="large">大</Radio>
                </Radio.Group>
                <Button type="primary" size={size}>单车</Button>
                <Button type="dashed" size={size}>单车</Button>
                <Button type="danger" size={size}>单车</Button>
            </Card>
        </div>
        )
    }
}


export default Buttons;
